<template>
  <el-form-item
    :label="item.label"
    :prop="item.prop"
  >
    <!--输入框表单类型-->
    <el-input
      v-if="item.type === 'text'"
      v-model="fieldData"
      clearable
      :placeholder="item.placeholder ? item.placeholder : item.label"
      @keyup.enter.native="handleFilter"
    />
    <!--checkbox表单类型-->
    <el-checkbox-group
      v-if="item.type === 'checkbox'"
      v-model="fieldData"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
    >
      <el-checkbox
        v-for="option in item.data"
        :key="option.id"
        :label="option.id"
        @change="handleFilter"
      >{{ option.name }}</el-checkbox>
    </el-checkbox-group>
    <!--下拉选择类型-->
    <el-select
      v-if="item.type === 'select'"
      v-model="fieldData"
      :multiple="item.multiple"
      :collapse-tags="item.collapseTags"
      :value-key="item.valueKey"
      clearable
      filterable
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      @change="handleFilter"
    >
      <el-option
        v-for="(option, itemIndex) in item.data"
        :key="itemIndex"
        :label="item.labelKey ? option[item.labelKey] : option.label"
        :value="item.valueKey ? option[item.valueKey] : option.value"
      />
    </el-select>
    <!--级联选择器-->
    <el-cascader
      v-if="item.type === 'cascader'"
      v-model="fieldData"
      :props="item.props"
      :options="item.data"
      :collapse-tags="item.collapseTags"
      clearable
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      @change="handleFilter"
    />
    <!--日期时间类型-->
    <el-date-picker
      v-if="item.type === 'daterange'"
      v-model="fieldData"
      type="daterange"
      align="right"
      unlink-panels
      :range-placeholder="
        item.placeholder && item.placeholder.range ? item.placeholder.range : '至'
      "
      :start-placeholder="
        item.placeholder && item.placeholder.start ? item.placeholder.start : '开始日期'
      "
      :end-placeholder="
        item.placeholder && item.placeholder.end ? item.placeholder.end : '结束日期'
      "
      :picker-options="item.pickerOptions"
      @change="handleFilter"
    />
    <slot />
  </el-form-item>
</template>

<script>
export default {
  name: 'FilterItem',
  props: {
    value: {
      type: [String, Number, Object, Array],
      default: ''
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      filterModel: {}
    }
  },
  computed: {
    fieldData: {
      get() {
        return this.value
      },
      set(val) {
        console.log(val)
        console.log(this.item)
        this.$emit('input', val)
      }
    }
  },
  watch: {
    /* 实现表单数据的绑定，实时接收父组件的数据变化*/
    filterData() {
      this.filterModel = this.filterData
    }
  },
  mounted() {
    // 将组件上的属性赋值给当前组件内变量，因为props只能单向绑定,还需要监听属性值变化进行父子组件间交互
    this.filterModel = this.filterData
  },
  methods: {
    // 提交表单数据
    handleFilter() {
      this.$emit('filter', this.filterModel)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss">
.el-cascader__tags .el-tag:first-child {
  max-width: 85% !important;
}
</style>
<style lang="scss" scoped>
.filter-container {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f5f7fd;
  border-radius: 5px;
  .el-input {
    width: 100% !important;
  }

  .el-select {
    width: 100% !important;
  }
  .el-cascader {
    width: 100% !important;
  }

  ::v-deep .el-form-item {
    display: flex;
    margin: 0;
    &__label {
      font-size: 12px;
    }
    &__content {
      flex: 1;
    }
    & + .el-form-item {
      margin: 0;
    }
  }
}

.flex-form-item {
  display: grid;
  gap: 15px 2%;
  grid-template-columns: repeat(3, 32%);
  & + .flex-form-item {
    margin-top: 15px;
  }
}
</style>
